import { useContext, useState } from "react";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import settingIcon from "../images/Setting_line_light.svg";
import squareFillIcon from "../images/Square_fill.svg";
import arrowDropRightIcon from "../images/Arrow_drop_right.svg";
import { IsTrainingContext } from "./context";
import { initTrainParams, runTrain, stopTrain } from "../../api";
import styles from "./styles.module.scss";

function TrainSettings() {
  const { isTraining, setIsTraining } = useContext(IsTrainingContext);
  const [formData, setFormData] = useState(initTrainParams);

  async function handleRun() {
    const text = await runTrain(formData);
    console.log(text);
    setIsTraining(true);
  }

  async function handleStop() {
    const text = await stopTrain();
    console.log(text);
    setIsTraining(false);
  }

  return (
    <div className={`${styles.settings} ${styles.myCard}`}>
      <h5>
        <img alt="" src={settingIcon} />
        参数设置
      </h5>
      <Form>
        <fieldset className={styles.subForm} disabled={isTraining}>
        <Form.Group controlId="exp-name">
            <Form.Label>实验名</Form.Label>
            <Form.Control
              type="text"
              value={formData.expName}
              onChange={(e) => {
                setFormData({
                  ...formData,
                  expName: e.target.value,
                });
              }}
            />
          </Form.Group>
          <Form.Group controlId="total-timesteps">
            <Form.Label style={{ width: 120 }}>
              时间步:{formData.totalTimesteps}
            </Form.Label>
            <Form.Range
              min="100"
              max="1000000"
              value={formData.totalTimesteps}
              onChange={(e) => {
                setFormData({
                  ...formData,
                  totalTimesteps: Number.parseInt(e.target.value),
                });
              }}
            />
          </Form.Group>
          <Form.Group controlId="learning-rate">
            <Form.Label>学习率</Form.Label>
            <Form.Control
              type="number"
              value={formData.learningRate}
              min="0.0001"
              max="0.001"
              step="0.00005"
              onChange={(e) => {
                setFormData({
                  ...formData,
                  learningRate: Number.parseFloat(e.target.value),
                });
              }}
            />
          </Form.Group>
          <Form.Group controlId="buffer-size">
            <Form.Label>回放尺寸</Form.Label>
            <Form.Control
              type="number"
              min="0"
              max="10000"
              step="100"
              value={formData.bufferSize}
              onChange={(e) => {
                setFormData({
                  ...formData,
                  bufferSize: Number.parseInt(e.target.value),
                });
              }}
            />
          </Form.Group>
          <Form.Group controlId="gamma">
            <Form.Label>奖励衰减</Form.Label>
            <Form.Control
              type="number"
              min="0"
              max="1"
              step="0.01"
              value={formData.gamma}
              onChange={(e) => {
                setFormData({
                  ...formData,
                  gamma: Number.parseFloat(e.target.value),
                });
              }}
            />
          </Form.Group>
          <Form.Group controlId="batch-size">
            <Form.Label>批大小</Form.Label>
            <Form.Control
              type="number"
              min="1"
              max="500"
              value={formData.batchSize}
              onChange={(e) => {
                setFormData({
                  ...formData,
                  batchSize: Number.parseInt(e.target.value),
                });
              }}
            />
          </Form.Group>
        </fieldset>
        <fieldset className={styles.subForm} disabled={isTraining}>
          <Form.Group controlId="start-epsilon">
            <Form.Label>start epsilon</Form.Label>
            <Form.Control
              type="number"
              min="0"
              max="1"
              step="0.01"
              value={formData.startEpsilon}
              onChange={(e) => {
                setFormData({
                  ...formData,
                  startEpsilon: Number.parseFloat(e.target.value),
                });
              }}
            />
          </Form.Group>
          <Form.Group controlId="end-epsilon">
            <Form.Label>end epsilon</Form.Label>
            <Form.Control
              type="number"
              min="0"
              max="1"
              step="0.01"
              value={formData.endEpsilon}
              onChange={(e) => {
                setFormData({
                  ...formData,
                  endEpsilon: Number.parseFloat(e.target.value),
                });
              }}
            />
          </Form.Group>
          <Form.Group controlId="exploration_fraction">
            <Form.Label>探索比率</Form.Label>
            <Form.Control
              type="number"
              min="0"
              max="1"
              step="0.01"
              value={formData.explorationFraction}
              onChange={(e) => {
                setFormData({
                  ...formData,
                  explorationFraction: Number.parseFloat(e.target.value),
                });
              }}
            />
          </Form.Group>
          <Form.Group controlId="learning-starts">
            <Form.Label>启动时间步</Form.Label>
            <Form.Control
              type="number"
              min="0"
              max="50000"
              step="500"
              value={formData.learningStarts}
              onChange={(e) => {
                setFormData({
                  ...formData,
                  learningStarts: Number.parseInt(e.target.value),
                });
              }}
            />
          </Form.Group>
          <Button variant="secondary" onClick={() => { setFormData(initTrainParams); }} className={styles.alignSelf}>重置</Button>
        </fieldset>
      </Form>
      <div className={styles.btnsContainer}>
        <Button variant="primary" onClick={handleRun} disabled={isTraining}>
          <img alt="" src={arrowDropRightIcon}></img>
          开始
        </Button>
        <Button variant="danger" onClick={handleStop} disabled={!isTraining}>
          <img alt="" src={squareFillIcon}></img>
          停止
        </Button>
      </div>
    </div>
  );
}

export default TrainSettings;
